In [1]:
%%html

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
Your browser does not support the HTML5 canvas tag.
In [2]:
%%html

<iframe id="iframe_4"></iframe>
    
<script>
var canvas = document.getElementById("myCanvas")
var image = canvas.toDataURL()
$('#iframe_4').attr('src', image);
$('#iframe_4').attr('width', canvas.width + 5);
$('#iframe_4').attr('height', canvas.height + 5);
</script>